<template>
  <!-- 任务执行管理 -->
    <div class="taskExecuteManage">
        <!-- 头部 -->
        <div class="classTop">
            <div class="classTop_l">
                <CommonTitle titleName="当前任务量">
                </CommonTitle>
                <div class="d-flex a-center">
                    <div class="itemBox itemBox1">
                        <div class="item">
                            <div class="icon">
                                <svg-icon icon-class="project-detail-icon-2" class="icon"/>
                            </div>
                            <div class="parBox">
                                <div class="parnum">{{ taskInfo.waitAllot }}</div>
                                <div class="parname">待配置</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="icon">
                                <svg-icon icon-class="project-detail-icon-4" class="icon"/>
                            </div>
                            <div class="parBox">
                                <div class="parnum">{{ taskInfo.notStart }}</div>
                                <div class="parname">未开始</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="icon">
                                <svg-icon icon-class="project-detail-icon-7" class="icon"/>
                            </div>
                            <div class="parBox">
                                <div class="parnum">{{ taskInfo.doing }}</div>
                                <div class="parname">进行中</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="icon">
                                <svg-icon icon-class="project-detail-icon-1" class="icon"/>
                            </div>
                            <div class="parBox">
                                <div class="parnum">{{ taskInfo.done }}</div>
                                <div class="parname">已完成</div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex ">
                        <!-- <div class="itemBtn">
                            <el-button >预设任务规划管理</el-button>
                        </div>-->
                        <div class="itemBtn m-l10">
                            <el-button
                                class="button_edit"
                                @click="toPath('implementationRules')"
                            >实施行为细则</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表单 -->
        <div class="formBox">
            <el-form :inline="true" :model="taskForm" class="demo-form-inline">
                <el-form-item class="formBox_top_input" label="搜索">
                    <el-input v-model="form.keyword" placeholder="请输入任务编号/任务名称" maxlength="32"  />
                </el-form-item>
                <el-form-item label="任务类型">
                    <el-select v-model="form.taskType" placeholder="请选择任务类型">
                        <el-option label="全部" value="" />
                        <el-option value="1"  label="招标任务" />
                        <el-option value="2"  label="投资任务" />
                        <el-option value="3"  label="租赁任务" />
                        <el-option value="4"  label="工程建设" />
                        <el-option value="5"  label="招标合约" />
                        <el-option value="6"  label="资产租赁" />
                    </el-select>
                </el-form-item>
                <el-form-item label="项目状态">
                    <el-select v-model="form.status" placeholder="请选择项目状态">
                        <el-option label="全部" value="" />
                        <el-option value="-1" label="未完成" />
                        <el-option value="0"  label="进行中" />
                        <el-option value="1"  label="完成" />
                        <el-option value="2"  label="为配置" />
                        <el-option value="3"  label="未开始" />
                    </el-select>
                </el-form-item>

                <el-button class="el_classbtn m-r10" color="#FF7B50" style="color: #fff" type="primary" @click="onQuery">搜索</el-button>
                <el-button class="el_classbtn" style="" color="#F0F0F0" @click="onReset">重置</el-button>
                <div class="radio_">
                    <div class="search-right-wrap">
                        <div
                                class="screen-button d-flex a-center j-center"
                                :style="{'--screen-button-border-color':form.hide==='1'?'#fc7037':'#CCCCCC'}"
                                @click.prevent="radioChange(form.hide)"
                        >
                            <el-radio
                                    v-model="form.hide"
                                    label="1"
                            >隐藏已完结项目</el-radio>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>

        <public-table
            index
            :page="page"
            :tableData="tableData"
            :tableOption.sync="tableOption"
            @page-change="onPageChange">
            <template #buttons="scope">
                <el-button @click="toPath('configureNodes',scope.row)" class="button_edit">配置节点</el-button>
                <el-button @click="toPath('taskExecution',scope.row)" class="button_funtion2">任务执行</el-button>
            </template>
        </public-table>

    </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable";
import {reactive, onMounted, ref} from "vue";
import { ElInput, ElSelect, ElOption, ElRadio,ElForm } from 'element-plus';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import { taskStatusOptions } from "@/common/dict/dictCollect";
import {tableCommonFun} from "@/hooks/tableCommon";
import {investmentProjects} from "@/api/investment";

const store = useStore();

// 从路由path中获取的
const router = useRouter();
const projectId = router.currentRoute.value.params.projectId;

const interfaceConfig = reactive({
    fileName:'investment',
    apiPath:'investmentProjects.getProjectTaskList',
});

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({
    projectId: projectId,
    hide:'1'
});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,{},defaultParameters);

form.value = {
    keyword:'',
    taskType:'',
    status:'',
    hide:'1'
}

tableOption.value = [
  {
    label: "任务状态", prop: "status", formatter: (val, row) => {
      return ['进行中', '完成'][val] || '未完成';
    }, minWidth: 100
  },
  { label: "任务名称", prop: "taskName", minWidth: 100 },
  { label: "任务编号", prop: "taskCode", minWidth: 120 },
  {
    label: "任务类型", prop: "taskType", formatter: (val, row) => {
      return ['', '招标任务', '投资任务', '租赁任务'][val] || '-';
    }, minWidth: 100
  },
  {
    label: "任务量", prop: "taskNum", formatter: (val, row) => {
      return row.doneTaskNum + '/' + row.taskNum;
    }, minWidth: 100
  },
  { label: "计划开始时间", prop: "planStartTime", minWidth: 120 },
  { label: "计划结束时间", prop: "planEndTime", minWidth: 120 },
  { label: "实际完成日期", prop: "realEndTime", minWidth: 120 },
  { label: '操作', prop: 'buttons', slot: true, width: 400,fixed: "right"}
];

const taskForm = reactive({
    keywords: '',
    taskStatus: '',
    projectTypeExplain: '',
    tenderTypeExplain: '',
    deptId: '',
    deptName: '',
    isHideComplete: ''
});

const radioChange = (e) => {
  if(e === '0'){
      form.value.hide = '1';
  }else if(e === '1'){
      form.value.hide = '0'
  }
  onQuery();
}

/**
 * 跳转页面
 * @param key
 * @param row
 */
const toPath = (key, row) => {
    switch (key) {
        case 'configureNodes':
            router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/task/configureNodes/${row.projectTaskId}/${row.taskName}`})
            break;
        case 'taskExecution':
            router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/task/taskExecution/${row.projectTaskId}/${row.taskName}`});
            break;
        case 'implementationRules':
            router.push({path:`/investmentProjectManagement/investmentProjects/implementationRules`});
            break;
    }
}

/**
 * 任务完成情况
 */
const taskInfo = ref({});
const getTaskNum = (projectId) => {
    investmentProjects.getTaskNum(projectId)
        .then(res=>{
            if(res.code === '200'){
                taskInfo.value = res.data;
            }
    });
}

onMounted(() => {
    getTaskNum(projectId);
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            projectId:projectId,
            hide:'1'
        }
    });
})


</script>

<style lang="scss" scoped>
.taskExecuteManage {
  .classTop {
    display: flex;

    .classTop_l {
      width: 45%;
    }

    .itemBox {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }

    .itemBox1 {
      display: flex;
      justify-content: space-between;
      padding-right: 10%;
    }

    .item {
      width: .7813rem;
      height: .3125rem;
      padding: .0833rem;
      display: flex;
      border-radius: .026rem;
      box-shadow: 0 .0104rem .0625rem 0 rgba(0, 0, 0, 0.1);
      margin-right: .1042rem;

      .icon {
        width: .125rem;
        height: .125rem;
      }

      .parBox {
        margin-left: .0521rem;

        .parnum {
          font-size: .0729rem;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          color: #1A1A1A;
          line-height: .0833rem;
        }

        .parname {
          font-size: .0625rem;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #999999;
          line-height: .0833rem;
        }
      }
    }

    .classTop_r {
      width: 55%;

      .itemBtn {
        padding: 0rem .0521rem;
        margin-top: .0313rem;
      }
    }
  }

  .formBox {
    margin-top: .1875rem;
    margin-bottom: .1458rem;

    .el-form {
      .el-form-item {
        margin-bottom: .0521rem;
        :deep(.el-input) {
          width: 300px;
        }
        :deep(.el-select .el-input) {
            width: 300px;
        }
      }
      .formBox_top_input {
        :deep(.el-form-item__content) {
            width: 300px;
        }
      }

      .assetInputBtn {
        &:hover {
          background-color: #fff;
          color: $btn-defualt-tx-color;
        }

        .addAssetBtnImg {
          width: .0938rem;
          height: .0938rem;
        }
      }
    }

    .searchDivider {
      height: .2083rem;
      margin: 0 .1563rem;
    }
  }
}

.el_classbtn {
  margin-top: -0.0521rem;
}

.radio_ {
  display: flex;
  justify-content: right;
  // margin: .1042rem .1042rem 0 0;
  float: right;
}
.search-right-wrap{

  .screen-button{
    width: .7813rem;
    height: .2083rem;
    border-radius: .1042rem;
    border: .0052rem solid var(--screen-button-border-color);
  }
}
</style>
